
<html>
    <head>
        <meta charset="utf-8">
        <title>Create a Parralax Website using Stellar.js</title>

		<link type="text/css" rel="stylesheet" href="css/jquery-ui.css" > 
		<link type="text/css" rel="stylesheet" href="css/formUpload.css" >

        <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->
        <script type="text/javascript" src="js/jQuery-1.9.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
		<script type="text/javascript" src="js/jwebsocket.js"></script>
		<script type="text/javascript" src="js/js_code.js"></script>
		<script type="text/javascript" src="js/GlobisPlugin.js"></script>
		<script type="text/javascript" src="js/common.js"></script>		
        <script type="text/javascript">
			var $jquery = jQuery.noConflict();
        </script>   

    </head>

    <body>
        <div id="screen1" style="position: relative;  height: 50%; border: 1px solid #ccc; z-index: 990 " >

            <iframe id="pagesLoaded1" src="" style="position: relative; z-index: 990; width: 100%; height: 100%; overflow: scroll"> 

			</iframe>

        </div>
<!--onmouseup="mouseControl = false;" onmousedown="mouseControl = true;" onmousemove="resize(event);"-->
		<div id="form" onmouseup="mouseControl = false;" onmousedown="mouseControl = true;" onmousemove="resize(event);"  style="position: relative;  z-index: 990; width: 100%; background-color: grey">

			<input type="text" id="inputText" name="alcides" value="http://google.com/" />
			<input type="button" value="go" onclick="getPage()">
			<input id="hideExpand" type="button" style="float: right" value="hide" onclick="resize(false);">
			<!--            <input type="button" value="go" onclick="getPage6()">
						<input type="button" value="go" onclick="visible(3)">-->
		</div>


		<div id="screen2" style="position: relative;  height: 50%; border: 1px solid #ccc; z-index: 998; width: 100%" >
			
			<div id="gallery">
				<h1>Upload Your Images</h1>
				<form method="post" enctype="multipart/form-data"  action="upload.php">
					<input type="file" name="images" id="images" multiple />
					<button type="submit" id="btn">Upload Files!</button>
				</form>

				<div id="response"></div>


				<div id="image-list">		

				</div>
				<div id="buttons" style="text-align: center; margin-left: 45%; margin-bottom: 10px; display: none">		
					<div style="position:relative; float: left; margin-right: 5px">
						<img src="images/slidebox_previous.png" onclick="sliderPrev()" />
					</div>	
					<div style="position:relative; float: left; margin-left: 5px">
						<img src="images/slidebox_next.png" onclick="sliderNext()" />
					</div>
				</div>

			</div>


			<script type="text/javascript" src="js/upload.js"></script>

		</div>


		<script type="text/javascript">

			var registerType = "register-management", screen1Height = $jquery('#screen1').height(), mouseControl = false;

			initPage();


			$jquery('#galeria').contents().find('div').each(function(i) {

				$jquery(this).attr('id', 'globis' + i);

				
			})

			$jquery('#inputText').keypress(function(key) {

				if (key.which === 13)
					getPage();
			});


			function getPage() {

				$jquery('#pagesLoaded1').attr('src', 'http://main/phpFiles/phpHTTP.php?url=' + $jquery('#inputText').val());


			}
			function resize(event) {

				if (event) {
					if (mouseControl) {

						$jquery('#screen1').height(event.pageY - 20);
					}
				}
				else {
					if ($jquery('#hideExpand').attr('value') === 'hide') {

						$jquery('#screen1').height(645 - $jquery('#form').height());

						$jquery('#hideExpand').attr('value', 'expand');
					}
					else {

						$jquery('#screen1').height(screen1Height);

						$jquery('#hideExpand').attr('value', 'hide');
					}

				}




			}


		</script>
    </body>
</html>
